<template>
  <div class="detail-data">
    <el-tabs v-model="activeName">
      <el-tab-pane label="血压历史状态" name="pressure">
        <div class="title">
          <div class="label">选择时间：</div>
          <el-date-picker
            v-model="value"
            
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
          <el-button type="primary" class="search-btn" icon="el-icon-search" @click="search()"></el-button>
          <el-button type="primary" class="search-btn" icon="el-icon-refresh-left" @click="setDetail()"></el-button>
        </div>

        <div id="container1"></div>
      </el-tab-pane>
      <el-tab-pane label="血糖历史状态" name="Glucose">
        <glucose/>
      </el-tab-pane>
      <el-tab-pane label="报警历史状态" name="Alarm">
        <alarm/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { DualAxes } from '@antv/g2plot';
import {dateFormat} from '../util/utils'
import Glucose from './Glucose.vue';
import Alarm from './Alarm.vue';
export default {
  components: { Glucose, Alarm },
  props: [],
  data() {
    return {
      value: "",
      activeName: "1",
      historyData: [],
      glucosePressure:{},
      startDate: "",
      endDate: "",
      diastolicPressureValue: 0,
      presureValue: 0,
      line: null,
    };
  },
  mounted() {
    // 发起请求，获取设备历史数据
    this.getGlucosePressure();
  },
  methods: {
    setDetail(){
      this.getGlucosePressure()
    },
    getGlucosePressure(){
        this.axios.get("/glucosePresure/list").then(
            response=>{
                this.glucosePressure=response.data[0]
                this.getData()
                console.log('DetailData',response.data)
            },error=>{
                console.log('DetailData',error.msg)
            }
        )
    },
    getData() {
      this.$http
        .get(
          `/glucosePresurePropHistoryLog/list?deviceName=${this.glucosePressure.deviceName}&startDate=${this.startDate}&endDate=${this.endDate}`
        )
        .then((res) => {

          console.log('DD',res.data)
          this.historyData=res.data.map((item)=>{
            return{
              date:item.gmtCreate,
              diastolicPressure:item.currentDiastolicPressure,
              presure:item.currentPresure,
            }
          })
          if(this.line){
          this.line.changeData([this.historyData,this.historyData])
        }else{
          this.line = new DualAxes("container1", {
            data: [this.historyData, this.historyData],
            xField: "date",
            yField: ["diastolicPressure", "presure"],
            meta: {
              presure: {
                alias: "收缩压",
              },
              diastolicPressure: {
                alias: "舒张压",
              },
            },
            yAxis: {
              presure: {
                min: 0,
              },
              diastolicPressure: {
                min: 0,
              },
            },
            geometryOptions: [
              {
                geometry: 'line',
                color: '#ff0000',
              },
              {
                geometry: 'line',
                color: '#00f2ff',
              },
            ],
            // 标注，温度阈值的标注
            annotations: {
              diastolicPressure: [
                {
                  type: "text",
                  position: ["min",60 ],
                  content: "舒张压Min",
                  offsetY: -4,
                  style: {
                    textBaseline: "center",
                  },
                },
                {
                  type: "line",
                  start: ["min", 60],
                  end: ["max", 60],
                  style: {
                    stroke: "#F4664A",
                    lineDash: [2, 2],
                  },
                },
                {
                  type: "text",
                  position: ["min",90 ],
                  content: "舒张压Max",
                  offsetY: -4,
                  style: {
                    textBaseline: "center",
                  },
                },
                {
                  type: "line",
                  start: ["min", 90],
                  end: ["max", 90],
                  style: {
                    stroke: "#F4664A",
                    lineDash: [2, 2],
                  },
                },
                
              ],
              presure: [
                {
                  type: "text",
                  position: ["min", 90],
                  content: "收缩压Min",
                  offsetY: -4,
                  style: {
                    textBaseline: "center",
                  },
                },
                {
                  type: "line",
                  start: ["min", 90],
                  end: ["max", 90],
                  style: {
                    stroke: "#bb00ff",
                    lineDash: [2, 2],
                  },
                },
                {
                  type: "text",
                  position: ["min",140],
                  content: "收缩压Max",
                  offsetY: -4,
                  style: {
                    textBaseline: "center",
                  },
                },
                {
                  type: "line",
                  start: ["min", 140],
                  end: ["max", 140],
                  style: {
                    stroke: "#bb00ff",
                    lineDash: [2, 2],
                  },
                },
              ],
            },
          });
        }
          this.line.render();
        });

    },
    search(){
      this.startDate=dateFormat(this.value[0],"yyyy-MM-dd")
      this.endDate=dateFormat(this.value[1],"yyyy-MM-dd")
      this.getData()
    }
  },
  watch: {
  },
};
</script>

<style scoped>
.detail-data {
  padding: 20px;
}
.title {
  display: flex;
  justify-content: start;
}
.label {
  line-height: 36px;
  margin-right: 20px;
}
.search-btn {
  margin: 0 20px;
}
</style>